import { Input } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import store from '@/store/Data'

const Page = () => {
  // 通过 useSelector 方法，获取返回的 state 中的数据
  const { num } = useSelector((state: RootState) => ({
    num: state.reducer1.num,
  }))
  const { num: num2 } = useSelector((state: RootState) => ({
    num: state.reducer2.num,
  }))
  // 通过 useDispatch 方法，修改 state 中的数据
  const dispatch = useDispatch()

  const changeNum = () => {
    // type 固定属性对应触发的函数名
    // val 自定义的属性
    // 该方法执行后 reducer 中的会对传递的 type 值进行判断执行对应的操作
    // 异步的写法  redux-thunk 的用法  dispatch(异步执行的函数)
    // disp 相当于 dispatch 用来标记调用的函数
    // dispatch((disp: Function) => {
    //   setTimeout(() => {
    //     disp({ type: 'add' })
    //   }, 0)
    // })
    
    // 优化 redux-thunk 的异步方法
    // dispatch(调用状体管理中的 asyncAdd)
    dispatch(store.asyncFun.asyncAdd)
  }

  return (
    <div>
      <h1>模块1：{num}</h1>
      <h1>模块2：{num2}</h1>
      <button onClick={changeNum}>异步调用</button>
    </div>
  )
}

export default Page
